<?php
use yii\bootstrap\ActiveForm;
use common\helps\tools;
?>
<link rel="stylesheet" href="../static/dist/css/AdminLTE.min.css" type="text/css">
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../static/plugins/datatables/jquery.dataTables.css" type="text/css">
<link rel="stylesheet" href="../static/css/admin.css" type="text/css">
<link rel="stylesheet" href="../static/jBox/Skins/Metro/jbox.css" type="text/css">
<style>
    .dataTable>tbody>tr>td{
        vertical-align: middle;
        font-size: 0.8em;
        padding: 8px 18px;
    }
    .dataTable>thead>tr>th{
        vertical-align: middle;
        font-size: 0.8em;
        text-align: center;
    }
    .examine-content .input-group .form-control{
        margin-bottom: 20px;
        height: 30px ;
        line-height: 30px;
    }
    .examine-content button{
        margin: 10px;
    }
    label{
        text-align: right;
    }
    #table_id_example th, td {
        white-space: nowrap;
    }
    #table_list th,td{ font-family: '微软雅黑'; font-size: small; text-align: center}

</style>
<div class="tabs-panel">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">
                    <div class="col-md-12" style="padding-bottom: 10px">
                        <label class="col-sm-2 control-label">编号：</label>
                        <div class="col-sm-4">
                            <input type="hidden" name="bom_Id" id="bom_Id" value="<?=$bom?$bom['AutoId']:''?>">
                            <input type="text" class="form-control" name="bom_code" id="bom_code" value="<?=$bom?$bom['code']:''?>">
                        </div>
                        <label class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="bom_name" id="bom_name" value="<?=$bom?$bom['name']:''?>">
                        </div>
                    </div>
                    <div class="col-md-12" style="padding-bottom: 10px">
                        <label class="col-sm-2 control-label">产品：</label>
                        <div class="col-sm-4">
                            <select id="bom_product" name="bom_product" class="form-control">
                                <option value="">选择产品</option>
                                <?php foreach($product as $value) { ?>
                                    <option value="<?= $value['AutoId']?>" <?=($bom&&$bom['developProductId']==$value['AutoId'])?'selected':'' ?>><?= $value['name']?></option>
                                <?php }?>
                            </select>
                        </div>
                        <label class="col-sm-2 control-label">版本：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" name="version" id="version" value="<?=$bom?$bom['version']:''?>">
                        </div>
                    </div>
                    <div class="col-md-12" style="padding-bottom: 10px">
                        <label class="col-sm-2 control-label">备注：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="remark" id="remark" value="<?=$bom?$bom['remark']:''?>">
                        </div>
                    </div>

                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary" id="show-materiel-btn" style="width: 100px; margin-bottom: 5px">添加</button>
                        <table id="table_list" class="table table-bordered table-hover">
                            <thead>
                            <tr style="line-height: 0px; padding: 0px">
                                <th style="width: 8%">编号</th>
                                <th style="width: 9%">名称</th>
                                <th style="width: 9%">分类</th>
                                <th style="width: 8%">最小用量</th>
                                <th style="width: 9%">使用单位</th>
                                <th style="width: 9%">参考含</br>税单价</th>
                                <th style="width: 8%">使用份数</th>
                                <th style="width: 8%">误差下限</th>
                                <th style="width: 8%">误差上限</th>
                                <th style="width: 8%">类型</th>
                                <th style="width: 8%">状态</th>
                                <th style="width: 8%">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php if($bom && $bom['dtl']){ foreach ($bom['dtl'] as $dtl){ ?>
                                <tr data-code="<?= $dtl['developMaterielId'] ?>">
                                    <td><?= $dtl['code'] ?></td>
                                    <td><?= $dtl['name'] ?></td>
                                    <td><?= $dtl['categoryName'] ?></td>
                                    <td><?= $dtl['minUnit'] ?></td>
                                    <td><?= $dtl['useUnit'] ?></td>
                                    <td><?= $dtl['referPrice'] ?></td>
                                    <td><input name="useQty" value="<?= $dtl['useQty'] ?>" style="width: 80px"></td>
                                    <td><input name="tolerance_min" value="<?= $dtl['tolerance_min'] ?>" style="width: 80px"></td>
                                    <td><input name="tolerance_max" value="<?= $dtl['tolerance_max'] ?>" style="width: 80px"></td>
                                    <td><select name="type" style="width: 60px">
                                            <option value="0" <?=($dtl['type']=='0')?'selected':'' ?>>基础</option>
                                            <option value="10" <?=($dtl['type']=='10')?'selected':'' ?>>堂食</option>
                                            <option value="20" <?=($dtl['type']=='20')?'selected':'' ?>>外卖</option>
                                        </select>
                                    </td>
                                    <td><select name="useFlg" style="width: 60px">
                                            <option value="0" <?=($dtl['useFlg']=='0')?'selected':'' ?>>禁用</option>
                                            <option value="1" <?=($dtl['useFlg']=='1')?'selected':'' ?>>启用</option>
                                        </select>
                                    </td>
                                    <td><a name="del-materiel">删除</a></td>
                                </tr>
                            <?php } } ?>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="box-footer" style="text-align: right">
                    <button type="button" class="btn btn-default" onclick="history.back();">返回
                    </button>
                    <button type="button" class="btn btn-primary hideBtn" onclick="saveBom()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="add-materiel-modal" style="background: rgba(236, 230, 230, 0.3);" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加物料</h4>
            </div>
            <div class="modal-body">
                <div class="box-header">
                    物料名称/编号: <input class="depart-input" id="searchKey" type="text">&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary depart-modal" id="search-btn" style="width: 100px;">查询</button> &nbsp;
                </div>
                <div class="box-body">
                    <table id="search_list" class="display">
                        <thead>
                        <tr>
                            <th style="width: 10%">Id</th>
                            <th style="width: 10%">编号</th>
                            <th style="width: 10%">名称</th>
                            <th style="width: 10%">分类</th>
                            <th style="width: 10%">最小用量</th>
                            <th style="width: 10%">使用单位</th>
                            <th style="width: 10%">参考价格</th>
                            <th style="width: 10%">状态</th>
                            <th style="width: 10%">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add-materiel-btn">添加</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../static/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript" src="../static/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="/static/app/global.js?version=<?=Yii::$app->params['version']?>"></script>

<script>
    var tempData = {};
    var selectData = {};
    var searchDataTable = null;

    <?php if($bom && $bom['dtl']){ foreach ($bom['dtl'] as $dtl){ ?>
    selectData['<?=$dtl['developMaterielId']?>'] = {
        materielId:'<?=$dtl['developMaterielId']?>',
        useQty: '<?=$dtl['useQty']?>',
        tolerance_min: '<?=$dtl['tolerance_min']?>',
        tolerance_max: '<?=$dtl['tolerance_max']?>',
        type: '<?=$dtl['type']?>',
        useFlg: '<?=$dtl['useFlg']?>'
    };
    <?php } } ?>


    //初始化modal
    $('#show-materiel-btn').on('click', function () {

        $('#add-materiel-modal').modal('show');
        if(searchDataTable) {
            searchDataTable.ajax.reload();
            return;
        }

        searchDataTable = $('#search_list').DataTable({
            dom: '<"top">rt<"bottom"flip><"clear">',
            language: {
                "sUrl":'../static/plugins/datatables/language.json'
            },
            "searching": false,
            "processing": true,
            "serverSide": true,
            ajax:{
                url:'/develop/materiel-list',
                type:'post',
                data:function(d){
                    d.searchKey = $('#searchKey').val();
                },
                error:getError
            },
            aoColumns: [
                { "data": "AutoId", "bSortable": false },
                { "data": "code", "bSortable": false },
                { "data": "name", "bSortable": false },
                { "data": "categoryName", "bSortable": false },
                { "data": "minUnit", "bSortable": false },
                { "data": "useUnit", "bSortable": false },
                { "data": "referPrice", "bSortable": true },
                { "data": "useFlg", "bSortable": true },
                { "data": "AutoId", "bSortable": true },
            ],
            columnDefs: [
                {
                    "targets": [-2],
                    "orderable":false,
                    "searchable":false,
                    "render": function(data, type, full) {
                        if(data == 0) return '禁用';
                        if(data == 1) return '启用';
                        return '';
                    }
                },
                {
                    "targets": [-1],
                    "orderable":false,
                    "searchable":false,
                    "render": function(data, type, full) {
                        if(!selectData[data]){
                            return '<input style="width:20px;height:20px;" type="checkbox" class="input-check" value="'+data+'" '+ (tempData[data]? 'checked' : '') +'>';
                        }
                        return '';
                    }
                }
            ],
        });
    });

    //modal 搜索按钮
    $('#search-btn').on('click', function () {
        if (searchDataTable) {
            searchDataTable.ajax.reload();
            return;
        }
    });

    //modal 选中/取消 checkbox
    $('#search_list').on('click', 'input:checkbox', function () {
        var code = $(this).val();
        if($(this).is(':checked')){
            var _tr = $(this).parents('tr');
            tempData[code] = {
                materielId:_tr.find('td').eq(0).html(),
                materielCode:_tr.find('td').eq(1).html(),
                materielName:_tr.find('td').eq(2).html(),
                materielCategory:_tr.find('td').eq(3).html(),
                minUnit:_tr.find('td').eq(4).html(),
                useUnit:_tr.find('td').eq(5).html(),
                referPrice:_tr.find('td').eq(6).html(),
            }
        } else {
            delete tempData[code];
        }
    });

    //modal 添加按钮
    $('#add-materiel-btn').on('click',function () {
        if($.isEmptyObject(tempData)){
            $.jBox.tip('请选择物料', '错误');
        }else {
            var html = '';
            $.each(tempData,function (i, v) {
                if(!selectData[i]){
                    html += '<tr data-code="'+ i +'">';
                    html += '   <td>'+ v['materielCode'] +'</td>';
                    html += '   <td>'+ v['materielName'] +'</td>';
                    html += '   <td>'+ v['materielCategory'] +'</td>';
                    html += '   <td>'+ v['minUnit'] +'</td>';
                    html += '   <td>'+ v['useUnit'] +'</td>';
                    html += '   <td>'+ v['referPrice'] +'</td>';
                    html += '   <td><input type="text" name="useQty" style="width:80px;"></td>';
                    html += '   <td><input type="text" name="tolerance_min" style="width:80px;"></td>';
                    html += '   <td><input type="text" name="tolerance_max" style="width:90px;"></td>';
                    html += '   <td><select name="type" style="width: 60px">';
                    html += '       <option value="0">基础</option>';
                    html += '       <option value="10">堂食</option>';
                    html += '       <option value="20">外卖</option>';
                    html += '   </select></td>';
                    html += '   <td><select name="useFlg" style="width: 60px">';
                    html += '   <option value="0">禁用</option>';
                    html += '   <option value="1" selected>启用</option>';
                    html += '   </select></td>';
                    html += '   <td><a name="del-materiel">删除</a></td>';
                    html += '</tr>';
                }
                selectData[i] = v;
            });
            tempData = {}; //清空临时数据
            $('#table_list tbody').append(html);
            $('#add-materiel-modal').modal('hide');
        }
    });

    //删除事件
    $(document).on('click','a[name=del-materiel]',function () {
        var _tr = $(this).parents('tr');
        delete selectData[_tr.attr('data-code')];
        _tr.remove();
    });

    //提交事件
    function saveBom() {

        if($('#bom_code').val() == ''){
            $.jBox.tip('请输入bom编号');
            return;
        }
        if($('#bom_name').val() == ''){
            $.jBox.tip('请输入bom名称');
            return;
        }
        if($('#bom_product').val() == ''){
            $.jBox.tip('请选择产品');
            return;
        }
        if($('#version').val() == ''){
            $.jBox.tip('请输入版本号');
            return;
        }
        if($.isEmptyObject(selectData)){
            $.jBox.tip('请添加物料信息');
            return;
        }
        var errMsg = '';
        var trList = $("#table_list tbody").find('tr[data-code]');
        $.each(trList, function () {
            var code = $(this).attr('data-code'),
                useQty = $(this).find('input[name=useQty]').val(),
                tolerance_min = $(this).find('input[name=tolerance_min]').val(),
                tolerance_max = $(this).find('input[name=tolerance_max]').val(),
                type = $(this).find('select[name=type]').val(),
                useFlg = $(this).find('select[name=useFlg]').val();

            if($.isEmptyObject(selectData[code])) {
                errMsg = '数据异常，请刷新页面后重试';
                return false;
            }
            if($.trim(useQty) == '') {
                errMsg = '请输入使用分数';
                return false;
            }else if( !$.isNumeric(useQty)) {
                errMsg = '请输入正确的使用分数';
                return false;
            }
            if($.trim(tolerance_min) == ''){
                errMsg = '请输入误差上限';
                return false;
            }else if( !$.isNumeric(tolerance_min)) {
                errMsg = '请输入正确的误差上限';
                return false;
            }
            if($.trim(tolerance_max) == ''){
                errMsg = '请输入误差下限';
                return false;
            }else if( !$.isNumeric(tolerance_max)) {
                errMsg = '请输入正确的误差下限';
                return false;
            }

            selectData[code]['useQty'] = useQty;
            selectData[code]['tolerance_min'] = tolerance_min;
            selectData[code]['tolerance_max'] = tolerance_max;
            selectData[code]['type'] = type;
            selectData[code]['useFlg'] = useFlg;
        });

        if(errMsg){ $.jBox.tip(errMsg); return; }

        var bomData = {
            bom_Id: $("#bom_Id").val(),
            bom_code: $('#bom_code').val(),
            bom_name: $("#bom_name").val(),
            bom_product: $("#bom_product").val(),
            version: $("#version").val(),
            remark: $("#remark").val(),
            materiels:selectData
        }
        $.post('/develop/add-bom', bomData,
            function (data) {
                if(data.code == 200){
                    $.jBox.tip('保存成功', 'success');
                    window.setTimeout(function () {
                        history.back();
                    }, 1000);
                }else{
                    $.jBox.error(data.val, '错误');
                }
            },
            'json'
        );
    }

</script>